import { ElTabPane, ElTabs } from 'element-plus';
import {defineComponent, onMounted, ref, watch} from 'vue';
import BreadCrumb from '~/src/components/BreadCrumb';
import { LdButton } from '~/src/components/Button';
import ButtonTag from '~/src/components/ButtonTag';
import Input from '~/src/components/Input';
import SelectHy from '~/src/components/SelectHy';
import { Steps } from '~/src/components/Steps';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Pagination from "@/components/Pagination";
import { ElEmpty } from 'element-plus';
import zwsj from "@/assets/images/zwsj.png";
import {useRoute} from "vue-router";
// 定义标签数据类型（支持分页筛选）
interface TagItem {
    id: string;
    title: string;
}

// 定义Tab数据源类型，包含标签数据
interface TabItem {
    key: string;
    label: string;
    defaultContent: TagItem[]; // 存储标签数据数组
}

export default defineComponent({
    setup() {
        const route = useRoute();
        // 当前标签页数据源
        const currentItem = ref();
        // 响应式样式切换
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 分页核心数据
        const showDatas = ref<TagItem[]>([]);// 分页当前页展示的数据
        const tabIndex = ref(0); // 当前Tab索引

        // Tab左侧标签（包含各标签页的数据）
        const activeTabKey = ref(); // 默认当前激活的Tab键
        const tabList = ref<TabItem[]>([
            {
                key: 'emergency',
                label: '急诊科',
                defaultContent: [
                    { id: '1', title: '急诊1' },
                    { id: '2', title: '急诊2' },
                    { id: '3', title: '急诊3' },
                    { id: '4', title: '急诊4' },
                    { id: '5', title: '急诊5' },
                    { id: '6', title: '急诊6' },
                    { id: '7', title: '急诊7' },
                    { id: '8', title: '急诊8' },
                    { id: '9', title: '急诊9' },
                    { id: '10', title: '急诊10' },
                    { id: '11', title: '急诊11' },
                    { id: '12', title: '急诊12' },
                    { id: '13', title: '急诊13' },
                    { id: '14', title: '急诊14' },
                    { id: '15', title: '急诊15' },
                    { id: '16', title: '急诊16' },
                    { id: '17', title: '急诊17' },
                    { id: '18', title: '急诊18' },
                    { id: '19', title: '急诊19' },
                    { id: '20', title: '急诊20' },
                    { id: '21', title: '急诊21' },
                    { id: '22', title: '急诊22' },
                    { id: '23', title: '急诊23' },
                    { id: '24', title: '急诊24' },
                    { id: '25', title: '急诊25' },
                    { id: '26', title: '急诊26' },
                    { id: '27', title: '急诊27' },
                    { id: '28', title: '急诊28' },
                    { id: '29', title: '急诊29' },
                    { id: '30', title: '急诊30' },
                    { id: '31', title: '急诊31' },
                    { id: '32', title: '急诊32' },
                    { id: '33', title: '急诊33' },
                    { id: '34', title: '急诊34' },
                    { id: '35', title: '急诊35' },
                ]
            },
            {
                key: 'internal',
                label: '内科系统',
                defaultContent: [
                    { id: '101', title: '内科1' },
                    { id: '102', title: '内科2' },
                    { id: '103', title: '内科3' },
                    { id: '104', title: '内科4' },
                    { id: '105', title: '内科5' },
                    { id: '106', title: '内科6' },
                    { id: '107', title: '内科7' },
                    { id: '108', title: '内科8' },
                    { id: '109', title: '内科9' },
                    { id: '110', title: '内科10' },
                    { id: '111', title: '内科11' },
                    { id: '112', title: '内科12' },
                    { id: '113', title: '内科13' },
                    { id: '114', title: '内科14' },
                    { id: '115', title: '内科15' },

                ]
            },
            {
                key: 'surgical',
                label: '外科系统',
                defaultContent: [

                ]
            },
            {
                key: 'dermatology',
                label: '皮肤科',
                defaultContent: [
                    { id: '301', title: '皮肤科1' },
                    { id: '302', title: '皮肤科2' },
                    { id: '303', title: '皮肤科3' },
                    { id: '304', title: '皮肤科4' },
                    { id: '305', title: '皮肤科5' },
                    { id: '306', title: '皮肤科6' },
                    { id: '307', title: '皮肤科7' },
                    { id: '308', title: '皮肤科8' },
                    { id: '309', title: '皮肤科9' },
                    { id: '310', title: '皮肤科10' },
                    { id: '311', title: '皮肤科11' },
                    { id: '312', title: '皮肤科12' },
                    { id: '313', title: '皮肤科13' },
                    { id: '314', title: '皮肤科14' },
                ]
            },
            {
                key: 'stomatology',
                label: '口腔科',
                defaultContent: [
                    { id: '401', title: '口腔科1' },
                    { id: '402', title: '口腔科2' },
                    { id: '403', title: '口腔科3' },
                    { id: '404', title: '口腔科4' },
                    { id: '405', title: '口腔科5'},
                    { id: '406', title: '口腔科6' },
                    { id: '407', title: '口腔科7' },
                    { id: '408', title: '口腔科8' },
                    { id: '409', title: '口腔科9' },
                    { id: '410', title: '口腔科10' },
                    { id: '411', title: '口腔科11' },
                    { id: '412', title: '口腔科12' },
                    { id: '413', title: '口腔科13' },
                    { id: '414', title: '口腔科14' },
                    { id: '415', title: '口腔科15' },
                ]
            },
            {
                key: 'ophthalmology',
                label: '眼科',
                defaultContent: [
                    { id: '501', title: '眼科1' },
                    { id: '502', title: '眼科2' },
                    { id: '503', title: '眼科3' },
                    { id: '504', title: '眼科4' },
                    { id: '505', title: '眼科5' },
                    { id: '506', title: '眼科6' },
                    { id: '507', title: '眼科7' },
                    { id: '508', title: '眼科8' },
                    { id: '509', title: '眼科9' },
                    { id: '510', title: '眼科10' },
                    { id: '511', title: '眼科11' },
                    { id: '512', title: '眼科12' },
                    { id: '513', title: '眼科13' },
                ]
            },
            {
                key: 'ent',
                label: '耳鼻喉科',
                defaultContent: [
                    { id: '601', title: '耳鼻喉1' },
                    { id: '602', title: '耳鼻喉2' },
                    { id: '603', title: '耳鼻喉3' }
                ]
            },
            {
                key: 'radiology',
                label: '放射科',
                defaultContent: [
                    { id: '701', title: '放射科1' },
                    { id: '702', title: '放射科2' },
                    { id: '703', title: '放射科3' }
                ]
            },
            {
                key: 'infection',
                label: '感染科',
                defaultContent: [
                    { id: '801', title: '感染科1' },
                    { id: '802', title: '感染科2' },
                    { id: '803', title: '感染科3' }
                ]
            },
        ]);

        //  Tab点击事件
        const handleTabClick = (tab: any) => {
            tabIndex.value = tab.index;
        };

        // 分页组件数据更新
        const handlePageChange = (Datas:any) => {
            showDatas.value = Datas;
        };

        onMounted(() => {
            // 解析传递过来的Item信息
            if (route.query.itemInfo) {
                currentItem.value = JSON.parse(route.query.itemInfo as string);
            }
            if (tabList.value.length > 0) {
                activeTabKey.value = tabList.value[0].key;// 默认选中第一个Tab
                tabIndex.value = 0; // 同时设置索引为0，保持一致性
            }
        });
        return () => (
            <>
                <UserInfo />
                <Steps />
                <div class={Style.container_mar}>
                    {/* 标题与输入框 */}
                    <div class={Style.title}>
                        <div>
                            <BreadCrumb style={{width: "100%",whiteSpace: "nowrap"}}/>
                        </div>
                        <div class={Style.search}>
                            <Input placeholder="输入科室首字母" />
                        </div>
                    </div>

                    {/* Tab主体区域 */}
                    <div class={Style.container}>
                        <div class={[Style.tab, "select_department_tabs"]}>
                            <ElTabs
                                type="border-card"
                                tabPosition="left"
                                onTabClick={handleTabClick}
                                modelValue={activeTabKey.value}
                            >
                                {tabList.value.map((tab) => (
                                    <ElTabPane
                                        key={tab.key}
                                        name={tab.key}
                                        v-slots={{
                                            label: () => <div style={{ textAlign: 'center' }}>{tab.label}</div>
                                        }}
                                    >
                                        {/* 标签列表 */}
                                        <div class={Style.tagsMar}>
                                            <div class={Style.tags}>
                                                {showDatas.value.length > 0 ?
                                                    showDatas.value.map((tag) => (
                                                    <ButtonTag
                                                        key={tag.id}
                                                        class={Style.tags_item}
                                                        active={false}
                                                        to="/SelectDoctor"
                                                        TagItem={tag}
                                                    >
                                                        {tag.title}
                                                    </ButtonTag>
                                                    )):
                                                    <div style={{marginTop:'-5%'}}>
                                                        <img src={zwsj} style={{width:'100%',height:'100%'}}/>
                                                    </div>
                                                }
                                            </div>
                                        </div>

                                        {/* 分页组件（只有当总页数大于1时显示） */}
                                        {
                                            <div style={{ margin: '0 64px' }}>
                                                <Pagination
                                                    pageSize={10}
                                                    Data={tabList.value[tabIndex.value].defaultContent}
                                                    onPageChange={handlePageChange}
                                                    customClass={Style.custom_pagination}
                                                />
                                            </div>
                                        }
                                    </ElTabPane>
                                ))}
                            </ElTabs>
                        </div>
                    </div>
                </div>
            </>
        );
    },
});
